<template>
	<view>
		<view class="p-2 top">
			<view class="flex align-center" v-for="order in orderDetail.item" :key="order.id">
				<view class="img">
					<image :src="order.goods_image|''" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="flex flex-column align-end ml-2">
					<view style="width: 536rpx;">{{order.goods_title||''}}</view>
					<view style="margin-top: 70rpx;">x{{order.goods_num||''}}</view>
				</view>
			</view>
			<view class="flex align-center justify-between mt-5">
				<view>实付（含付款）</view>
				<view>￥{{orderDetail.total_fee||''}}</view>
			</view>
		</view>
		
		<view class="list bg-white mt-2 px-3 py-2">
			<view class="item">订单信息</view>
			<view class="my-3 pl-3">订单编号：{{orderDetail.order_sn||''}}</view>
			<view class="pl-3 mb-2">创建时间：{{orderDetail.createtime||''}}</view>
		</view>
		
		<view class="foot bg-white position-fixed bottom-0 w-100 flex align-center justify-between px-3 py-4">
			<view class="price">合计：￥{{orderDetail.total_fee||''}}</view>
			<view class="flex align-center">
				<block v-if="orderDetail.status==0">
					<view class="cancel" @tap.stop="onCancel(orderDetail.id)">取消订单</view>
					<view class="submit" @tap="confirmPay">去支付</view>
				</block>
				<block v-if="orderDetail.status==-1||orderDetail.status==-2">
					<view class="close">交易关闭</view>
				</block>
				<block v-if="orderDetail.status==2">
					<view class="close">交易完成</view>
				</block>
				<block v-if="orderDetail.status==1">
					<view class="close">已支付</view>
				</block>
			</view>
		</view>
		
	</view>
</template>

<script>
	import Pay from '@/shopro/pay';
	export default{
		data(){
			return{
				isClose:false,
				orderId:0,
				orderDetail:{},
				payType:'wechat'
				
			}
		},
		onLoad() {
			this.orderId = this.$Route.query.orderId;
		},
		onShow() {
			this.getOrderDetail();
		},
		methods:{
			// 订单详情
			getOrderDetail() {
				let that = this;
				that.$http('order.detail', {
					// id: 7
					id: that.orderId
				}).then(res => {
					if (res.code === 1) {
						that.orderDetail = res.data;
						that.orderDetail.createtime = that.$u.timeFormat(res.data.createtime, 'yyyy-mm-dd hh:MM');
						that.orderDetail.paytime = that.$u.timeFormat(res.data.paytime, 'yyyy-mm-dd hh:MM');
						
					}
				});
			},
			// 取消订单
			onCancel(id) {
				let that = this;
				that.$http(
					'order.cancel',
					{
						id: id
					},
					'取消中...'
				).then(res => {
					if (res.code === 1) {
						that.$u.toast('取消成功');
						that.getOrderDetail();
					}
				});
			},
			// 发起支付
			confirmPay() {
				let that = this;
				let pay = null;
				if (!that.payType) {
					this.$u.toast('请选择支付方式');
					return;
				}
				if (that.payType === 'wallet') {
					uni.showModal({
						title: '支付提示',
						confirmColor: '#f0c785',
						content: `是否确认使用余额支付:${that.orderDetail.total_fee || '0.00'}元?`,
						success: res => {
							if (res.confirm) {
								pay = new Pay(that.payType, that.orderDetail);
							}
						}
					});
				} else {
					pay = new Pay(that.payType, that.orderDetail);
				}
			},
		}
	}
</script>

<style scoped>
	.top{
		background-image: url("");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		color: #666666;
		font-size: 26rpx;
	}
	
	.img{
		width: 159rpx;
		height: 160rpx;
	}
	.list{
		color: #626262;
		font-size: 26rpx;
	}
	.item{
		padding-left: 21rpx;
		border-left: 6rpx solid #C0145A;
	}
	.price{
		font-size: 26rpx;
		color: #000000;
		font-weight: 500;
	}
	.cancel{
		width: 162rpx;
		height: 73rpx;
		background-color: white;
		border: 2rpx solid #C0155A;
		border-radius: 36rpx;
		color: #C0155A;
		font-weight: 500;
		font-size: 28rpx;
		line-height: 73rpx;
		text-align: center;
	}
	.submit{
		width: 162rpx;
		height: 73rpx;
		background-color: #C0155A;
		border-radius: 36rpx;
		color: #FFFFFF;
		font-weight: 500;
		font-size: 28rpx;
		line-height: 73rpx;
		text-align: center;
		margin-left: 13rpx;
	}
	.close{
		width: 162rpx;
		height: 73rpx;
		background-color: white;
		border: 2rpx solid #888888;
		border-radius: 36rpx;
		color: #888888;
		font-weight: 500;
		font-size: 28rpx;
		line-height: 73rpx;
		text-align: center;
	}
</style>